<template>
    <div id="feedback-message" class="flex-center">
        <div class="container">
            <div class="top-content flex-center">
                <div class="top-list s-14 pointer" :class="status==='feedback'?'active':'noactive'" @click="status='feedback'">
                    留言反馈
                </div>
                <div class="top-list s-14 pointer" :class="status==='progress'?'active':'noactive'" @click="queryFeedback()">
                    处理进度
                </div>
            </div>
            <div v-show="status==='feedback'" class="feedbackBox">
                <div v-if="!submitSuccess">
                    <div class="lessonMsg">
                        <img style="width: 15px;height: 18px;" src="./img/local.png" alt="">
                        <span style="color: #8C8C8C;">{{lessonMsg.bookName}}  >  </span>
                        <span style="color: #8C8C8C;">{{lessonMsg.unitName}}  >  </span>
                        <span style="color: rgba(0,0,0,0.75);font-weight: 500;">{{lessonMsg.lessonName}}</span>
                    </div>
                    <div style="margin-top: 20px;">
                        <el-input
                          type="textarea"
                          :rows="9"
                          placeholder="请在此处提交您关于本节课程的反馈，例如PPT课件、教学设计、多媒体资源等内容和使用出现问题；或个人对该课程的意见建议等，我们将尽快处理。"
                          maxlength="1000"
                          v-model="feedbackMsg">
                        </el-input>
                    </div>
                    <div style="margin-top: 15px;" >
                        <div class="pointer" >
                            <el-upload
                            class="upload"
                            :data="qiniuData"
                            list-type="picture-card"
                            action="https://upload.qiniup.com"
                            ref="upImg"
                            :limit="6"
                            :show-file-list="true"
                            accept=".jpg , .png , .jpeg , .bmp"
                            :before-upload="beforeUpload"
                            :on-remove="removePic"
                            :on-success="uploadSuccess"
                            >
                            <div class="pointer addImg">
                                <img style="width: 26px;height: 26px;" src="./img/uploadPic.png" alt="">
                                <div>添加图片</div>
                            </div>
                            </el-upload>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;">
                        <button class="submitBtn pointer" :class="[feedbackMsg.length > 0 ? 'blueBg' : '']" @click="submitFeedback">确认提交</button>
                    </div>
                </div>
                <div v-else style="display: flex;justify-content:center;align-items:center;flex-direction: column;margin: 8vh;">
                    <div>
                        <img src="./img/submitSuccess.png" alt="">
                    </div>
                    <div>
                        <div class="successText">提交成功</div>
                        <div class="successText">感谢您的反馈，我们将尽快处理</div>
                    </div>
                    <div>
                        <button class="successBtn" @click="goback">返回</button>
                        <button class="successBtn" @click="close">关闭</button>
                    </div>
                </div>
            </div>
            <div v-show="status==='progress'" class="progressBox">
                <div v-if="showSingleFB" style="padding:20px 22px ;">
                    <div class="lessonMsg" style="margin-bottom: 15px;">
                        <img style="width: 15px;height: 18px;" src="./img/local.png" alt="">
                        <span style="color: #8C8C8C;">{{singleFeedback.lessonMsg.bookName}}></span>
                        <span style="color: #8C8C8C;">{{singleFeedback.lessonMsg.chapterName}} ></span>
                        <span style="color: rgba(0,0,0,0.85);font-weight: 500;">{{singleFeedback.lessonMsg.lessonName}}</span>
                    </div>
                    <div>
                        <div style="display: flex;align-items: center;">
                            <img style="width: 23px;height: 26px;" src="./img/question.png" alt="">
                            <span style="color: #1D1D1D;font-size: 16px;margin-left: 5px;">留言反馈 :</span>
                        </div>
                        <div style="margin-top: 10px;position: relative;" class="feedbackInput">
                            <el-input
                                readonly
                                type="textarea"
                                :rows="8"
                                maxlength="150"
                                show-word-limit
                                v-model="singleFeedback.message">
                            </el-input>
                            <div class="singleFbImg" v-if="singleFeedback.append">
                                <div v-for="(item,index) in singleFeedback.append" :key="index">
                                    <img :src="item" alt="" @click="showImg(item)">
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;margin-top: 20px;">
                            <img style="width: 23px;height: 26px;" src="./img/answer.png" alt="">
                            <span style="color: #1D1D1D;font-size: 16px;margin-left: 5px;">系统回复 :</span>
                        </div>
                        <div style="margin-top: 10px;">
                            <el-input
                                readonly
                                type="textarea"
                                :rows="5"
                                v-model="singleFeedback.reply">
                            </el-input>
                        </div>
                    </div>
                    <div class="backtoProgress">
                        <button @click="showSingleFB = false">返回</button>
                    </div>
                </div>
                <div v-else style="padding: 0 15px;">
                    <div style="margin:20px 0 10px 5px;font-size: 16px;">{{'已提交 '}}<span style="color: #0085FF;">{{ total }}</span><span>条 , 已处理</span> <span style="color: #0085FF;">{{ handleNum }}</span><span>条</span></div>
                    <el-table :data="feedbackData" style="width: 100%;background-color: transparent;" height="360" :header-cell-style="headerStyle">
                        <el-table-column label="课程名" >
                            <template slot-scope="scope">
                                <div >
                                    <span style="font-weight: 600;" class="s-14 line-over-ellipsis" >{{scope.row.lessonName}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="教材版本" >
                            <template slot-scope="scope">
                                <div>
                                    <span style="font-weight: 400; font-size: 12px">{{scope.row.publisherName}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="课本" >
                            <template slot-scope="scope">
                                <div>
                                    <span style="font-weight: 400; font-size: 12px">{{scope.row.bookName}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态"  >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <div style="display: flex;align-items:center ;margin-right: 5px;margin-top: 2px;">
                                        <img style="width: 10px;height: 10px;"  v-if="scope.row.isResponse == '1'" src="./img/handled.png" alt="">
                                        <img style="width: 10px;height: 10px;" v-else src="./img/untreated.png" alt="">
                                    </div>
                                    <div>{{scope.row.isResponse == '1' ? '已处理' : '待处理'}}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="提交时间" align="center"  :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span class="s-12 t-colo-n ">
                                    {{scope.row.createTime}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" >
                            <template slot-scope="scope">
                                <div style="color:#4893ff" class="pointer" @click="lookFeedback(scope.row)">查看</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="display: flex;justify-content: center;position: absolute;right: 5px;">
                        <el-pagination
                            background
                            :current-page="pageNum"  :page-size="pageSize"
                            layout="prev, pager, next " :total="total"
                            @current-change="handleCurrentChange" >
                        </el-pagination>
                    </div>
                </div>
            </div>
            <img @click="close" src="../../../.../../assets/img/home/close.png" class="close pointer">
            <!-- <div v-if="showCurrentImg" class="CurrentImg">
                <img :src="CurrentImg" alt="">
            </div> -->
        </div>
    </div>
</template>

<script>
import bus from '../../../assets/js/bus'
import store from '@/content/store/index.js'
import lessonApi from '@/content/api/lesson.js'
export default {
    data() {
        return {
            status:'feedback',
            lessonMsg:{},
            feedbackMsg:'',
            feedbackData:[],
            pageNum:1,
            pageSize:6,
            total:0,
            handleNum:0,
            qiniuData: {
                token: '',
                key: ''
            },
            pictrueKey:[],
            showSingleFB:false,
            submitSuccess:false,
            singleFeedback:{
                message:'',
                append:[],
                reply:'',
                lessonMsg:{}
            },
            // CurrentImg:"",
            // showCurrentImg:false,
        }
    },
    created() { },
    computed: {
       
    },
    watch: {
        
    },
    mounted(){
        bus.$on('passLessonMsg',(Msg)=>{
            console.log('lessonMsg',Msg);
            this.lessonMsg = Msg
        })
        this.getQiniuUploadToken()
    },
    
    methods: {
        // showImg(src){
        //     this.showCurrentImg = true
        //     this.CurrentImg = src
        // },
        goback(){
            this.submitSuccess = false
            this.feedbackMsg = ''
            this.pictrueKey = []
        },
        close(){
            this.$emit('closeFeedback')
        },
        getQiniuUploadToken(){
            const data = {
                isOverride: '0',
                domainType: '0',
                isPrivate: '0',
                uploadType:'11'
            }
            lessonApi.getQiniuUploadToken(data).then(res => {
                console.log(res);
                if (res.code == 0) {
                    this.qiniuData.token = res.returnValue.uploadToken
                    this.qiniuData.key = res.returnValue.uploadFileKey
                }
            })
        },
        beforeUpload(file){
            console.log(file);
            if (file.size > 10*1024*1024) {
                this.$message.warning('请上传10M以内的图片')
                return false
            }
            if (this.pictrueKey.length == 5) {
                this.$message.warning('已超出上传数量')
                return false
            }
        },
        removePic(file){
            console.log(this.pictrueKey);
            console.log(file);
            this.pictrueKey.forEach((item,index)=>{
                if (item == file.response.key) {
                    this.pictrueKey.splice(index,1)
                }
            })
            console.log(this.pictrueKey);
        },
        uploadSuccess(res){
            if (this.pictrueKey.length == 5) {
                return
            }
            // console.log(res);
            this.pictrueKey.push(res.key)
            this.getQiniuUploadToken()
        },
        handleCurrentChange(val){
            console.log(val);
            this.pageNum = val
            this.queryFeedback()
        },
        queryFeedback(){
            // let pre = document.getElementsByClassName('btn-prev')
            // if (pre[0]) {
            //     pre[0].innerHTML = '上一页'
            // }
            // let next = document.getElementsByClassName('btn-next')
            // if (next[0]) {
            //     next[0].innerHTML = '下一页'
            // }
            const param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            }
            lessonApi.queryFeedBackBLessons(param).then(res=>{
                console.log(res);
                if (res.code == '0') {
                    this.feedbackData = res.returnValue.records
                    this.total = Number(res.returnValue.total) 
                    if (this.total > 0) {
                        this.handleNum = res.returnValue.records[0].responseNum  
                    }
                    this.status = 'progress'
                }
            })
        },
        submitFeedback(){
            if ( !this.feedbackMsg) {
                return
            }
            const param = {
                description:this.feedbackMsg,
                lessonId:this.lessonMsg.lessonId,
            }
            if (this.pictrueKey) {
                param.append = JSON.stringify(this.pictrueKey)
            }
            lessonApi.createFeedBackByLesson(param).then(res=>{
                console.log(res);
                if (res.code == '0') {
                    this.submitSuccess = true
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        lookFeedback(row){
            console.log(row);
            const param = {
                id:row.id,
            }
            lessonApi.getFeedBackInfoById(param).then(res=>{
                console.log(res);
                if (res.code == '0') {
                    this.showSingleFB = true
                    // res.returnValue.description
                    this.singleFeedback.message = res.returnValue.description
                    console.log(this.singleFeedback.message.length);
                    if (this.singleFeedback.message.length >= 148) {
                        this.singleFeedback.message = this.singleFeedback.message.substring(0,147)
                        this.singleFeedback.message = this.singleFeedback.message + '...'
                    }
                    this.singleFeedback.append = res.returnValue.append
                    this.singleFeedback.reply = res.returnValue.replyContent
                    this.singleFeedback.lessonMsg.bookName = res.returnValue.bookName
                    this.singleFeedback.lessonMsg.chapterName = res.returnValue.chapterName
                    this.singleFeedback.lessonMsg.lessonName = res.returnValue.lessonName
                    if (row.isResponse == '0') {
                        this.singleFeedback.reply = '加急处理中，请耐心等待回复'
                    }
                }
            })
        },
        headerStyle(cell) {
            return 'font-weight: 550;color: rgba(0,0,0,0.85);background: #EBF1F7; '
        },
    }
}
</script>

<style lang="scss" scope>
#feedback-message {
    .list-enter-active,
    .list-leave-active {
    transition: all 1s ease;
    }
    .list-enter-from,
    .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
    }
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2022;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    font-family: PingFangSC-Regular, PingFang SC;
    .container {
        width: 61vw;
        max-width: 1170px;
        min-height: 59vh;
        max-height: 600px;
        border-radius: 4px;
        position: relative;
        background-image: url("./img/changePublishBg.png");
        background-repeat: no-repeat;
        background-size: cover;
        .top-content {
            margin-top: 20px;
            width: 100%;
            border-radius: 8px;
        }
        .top-list {
            width: 88px;
            height: 4vh;
            line-height: 4vh;
            text-align: center;
            border: 1px solid #1484F0;
            &:nth-child(1) {
                border-radius: 4px 0px 0px 4px;
            }
            &:nth-child(2) {
                border-radius: 0px 4px 4px 0px;
            }
        }
        .active {
            background: #1484F0;
            color: #fff;
        }
        .noactive {
            color: #1484F0;
        }
        .close {
            position: absolute;
            right: 22px;
            top: 22px;
            width: 15px;
            height: 15px;
        }
        .CurrentImg{
            img{
                width: 528px;
                height:336px ;
            }
            position: absolute;
            top: 100px;
            left:calc(50% - 264px)
        }
        .el-progress__text {
            margin-left: 5px;
        }
        .el-progress-bar {
            width: 183px;
        }
        .feedbackInput{
            .el-textarea__inner{
                background: #F1F8FF;
            }
        }
        .el-textarea__inner{
            border:2px solid #DCDFE6;
            color: #8c8f94 !important;
            font-size: 14px;
            letter-spacing: 2px;
        }
        .el-table .el-table__cell{
            padding: 8px 0;
        }
        .el-table tr{
            background-color: transparent !important;
        }
        .el-table::before {
            display: none;
        }
    }
    .feedbackBox{
        .addImg{
            box-sizing: border-box;
            img{
                margin-bottom: 15px;
            }
            
        }
        padding: 20px 50px;
        color:#606266;
        .blueBg{
            background: #0085FF !important;
        }
        .submitBtn{
            width: 120px;
            height: 40px;
            border-radius: 4px;
            font-size: 18px;
            border: none;
            background: #DEE2E6;
            color: #fff;
            position: absolute;
            bottom: 23px;
        }
        .el-upload-list--picture-card .el-upload-list__item-actions {
            width: 36px;
            height: 40px;
            font-size: 18px;
            border-radius: 2px;
            left: calc(50% - 18px);
            top: calc(50% - 20px);
        }
        .el-upload-list--picture-card .el-upload-list__item{
            width: 100px!important;
            height:100px!important;
            margin-right: 10px;
            border-radius: 4px;
        }
        .el-upload--picture-card{
            width: 100px!important;
            height:100px!important;
            padding-top: 25px;
            line-height: 0px!important;
            font-size: 12px;
        }
        .el-progress-circle{
            width: 56px !important;
            height: 56px !important;
            transform: translateX(36px);
        }
        .successText{
            text-align: center;
            margin: 10px auto;
            &:nth-child(1){
                font-size: 24px;
                font-weight: 400;
                color: rgba(0,0,0,0.85);
                line-height: 43px;
            }
            &:nth-child(2){
                font-size: 14px;
                font-weight: 400;
                color: rgba(0,0,0,0.45);
                line-height: 22px;
            }
        }
        .successBtn{
            cursor:pointer;
            width: 111px;
            height: 42px;
            border-radius: 4px;
            border: none ;
            margin: 40px 10px;

            &:nth-child(1){
                background: #F2F3F5;
            }
            &:nth-child(2){
                background: #228CF4;
                color: #fff;
            }
        }
    }
    .lessonMsg{
        font-size: 14px;
    }
    .progressBox{
        height: auto;
        .btn-prev , .btn-next{
            background-color: #fff;
            line-height: 30px;
            height: 30px;
            min-width: 30px;
        }
        .el-pager li{
            background-color: #fff;
            line-height: 30px;
            height: 30px;
            min-width: 30px;
        }
        .el-pager li.active{
            // background: none!important;
            border: 1px solid #4893ff;
            color: #4893ff;
        }
        .singleFbImg{
            position: absolute;
            bottom: 0px;
            left: 10px;
            margin: 10px 0;
            display: grid;
            grid-template-columns: repeat(5, 90px);
            gap: 10px;
            img{
                cursor: pointer;
                width: 90px;
                height: 90px;
                border-radius: 4px;
            }
        }
        .backtoProgress{
            text-align: center;
            margin-top: 20px;
            margin-bottom: 5px;
            button{
                cursor: pointer;
                width: 120px;
                height: 40px;
                line-height: 40px;
                background: #0085FF;
                border-radius: 4px;
                border: none;
                color: #fff;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
    
}
</style>
